<template>
  <div>
    <el-menu :default-active="tags.menu?.id?.toString() ?? ''" class="el-menu-vertical-demo" :collapse="isCollapse"
      :class="{ 'width': !isCollapse }" background-color="#545c64" text-color="#fff">
      <sys-menu-item v-for="menu in menus" :menu="menu" />
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { IMenu } from "@/api/menu/type"
import SysMenuItem from '@/components/SysMenuItem.vue';
import { useTagsViewStore } from "@/store/useTagsStore"
const tags = useTagsViewStore();

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
  menus: {
    type: Array<IMenu>,
    default: [],
  }
})
</script>

<style scoped>
.el-menu {
  transition: none;
  height: 100%;
  border-right: none !important;
}

.width {
  width: 200px;
}
</style>